import React, { forwardRef, useEffect, useMemo, useState } from 'react'
import { CloseIcon, StyledMorePanel } from './style'
import { Button, CheckBox, Space } from '@kedacom/react-next'
import { ICriteria } from '../interface'
import { useRequest } from 'ahooks'
import { fetchDevices } from '@/api/create'
import { t } from 'i18next'

export interface MorePopUpPanelProps {
	data: ICriteria
	onOk: ({
		devicesIds,
		personNumLowerLimit,
		personNumUpperLimit,
	}: {
		devicesIds: string
		personNumLowerLimit: number
		personNumUpperLimit: number
	}) => void
	onCancel: () => void
}

const MorePopUpPanel = forwardRef((props: MorePopUpPanelProps, ref: any) => {
	const { data, onOk, onCancel, ...restProps } = props
	const [devices, setDevices] = useState<{ label: string; value: number; checked: boolean; disabled: boolean }[]>([])
	const [personNumLowerLimit, setPersonNumLowerLimit] = useState(0)
	const [personNumUpperLimit, setPersonNumUpperLimit] = useState(0)

	const { run } = useRequest(fetchDevices, {
		onSuccess: (res) => {
			setDevices(
				res.map((item) => ({
					label: item.name,
					value: item.id,
					checked: data.deviceIds.split(',').includes(String(item.id)),
					disabled: item.id === 1,
				}))
			)
		},
	})

	useEffect(() => {
		setPersonNumLowerLimit(data.downSeating)
	}, [data.downSeating])

	useEffect(() => {
		setPersonNumUpperLimit(data.upSeating)
	}, [data.upSeating])

	const devicesIds = useMemo(() => {
		return devices
			.filter((item) => item.checked)
			.map((j) => j.value)
			.join(',')
	}, [devices])

	return (
		<StyledMorePanel className="more-panel" ref={ref} {...restProps}>
			<div className="top">
				<span>{t('更多选项')}</span>
				<CloseIcon onClick={onCancel} />
			</div>
			<div className="num">
				<span className="label">{t('容纳人数：')}</span>
				<span
					className={`option ${personNumLowerLimit === 0 && personNumUpperLimit === 0 ? 'select' : ''}`}
					onClick={() => {
						setPersonNumLowerLimit(0)
						setPersonNumUpperLimit(0)
					}}
				>
					{t('不限')}
				</span>
				<span
					className={`option ${personNumLowerLimit === 0 && personNumUpperLimit === 10 ? 'select' : ''}`}
					onClick={() => {
						setPersonNumLowerLimit(0)
						setPersonNumUpperLimit(10)
					}}
				>
					{t('10人以下')}
				</span>
				<span
					className={`option ${personNumLowerLimit === 10 && personNumUpperLimit === 20 ? 'select' : ''}`}
					onClick={() => {
						setPersonNumLowerLimit(10)
						setPersonNumUpperLimit(20)
					}}
				>
					{t('10-20人')}
				</span>
				<span
					className={`option ${personNumLowerLimit === 20 && personNumUpperLimit === 0 ? 'select' : ''}`}
					onClick={() => {
						setPersonNumLowerLimit(20)
						setPersonNumUpperLimit(0)
					}}
				>
					{t('20人以上')}
				</span>
			</div>
			<div className="equipment">
				<span className="label">{t('设备：')}</span>
				{devices.map((device, index) => (
					<CheckBox
						key={index}
						checked={device.checked}
						disabled={device.disabled}
						width={70}
						onClick={() => {
							let arr = [...devices]
							arr[index].checked = !arr[index].checked
							setDevices(arr)
						}}
					>
						{device.label}
					</CheckBox>
				))}
			</div>
			<Space className="btns">
				<Button onClick={() => onOk({ devicesIds, personNumLowerLimit, personNumUpperLimit })}>
					{t('确定')}
				</Button>
				<Button onClick={onCancel}>{t('取消')}</Button>
			</Space>
		</StyledMorePanel>
	)
})

export default MorePopUpPanel
